<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <img
      src="https://cdn.uviewui.com/uview/album/1.jpg"
      class="my_info_bc"
      alt=""
    />

    <view class="index_main">
      <!-- 個人信息（登錄成功狀態） -->
      <view class="user-info" style="position: relative">
        <view
          class="user_info__avatar_container"
          style="position: absolute; bottom: -80rpx"
          @click="goUser"
        >
          <view style="display: flex; align-items: center">
            <u-avatar
              class="user_info__avatar__img"
              :src="'/static/demo/avatar.png'"
              shape="square"
            ></u-avatar>

            <view class="user_info__name" style="margin-top: 10rpx"
              >用戶名</view
            >
          </view>

          <img
            class="user_code"
            :src="'./static/demo/code.png'"
            @click="show = true"
          />
        </view>
      </view>

      <!-- 佔位符 -->
      <view style="height: 104.651rpx"> </view>

      <!-- 優惠券，錢包，積分 -->
      <view class="user_info__coupon">
        <!-- 優惠券 -->
        <view class="user_info__coupon__item">
          <view class="user_info__coupon__item__icon"> 0 </view>
          <view class="user_info__coupon__item__text">
            <view class="user_info__coupon__item__text__title">優惠券</view>
          </view>

          <view class="_coupon_border"></view>
        </view>

        <view class="user_info__coupon__item" @click="goWallet">
          <view class="user_info__coupon__item__icon"> 0.00 </view>
          <view class="user_info__coupon__item__text">
            <view class="user_info__coupon__item__text__title">已消費金額</view>
          </view>

          <view class="_coupon_border"></view>
        </view>

        <view class="user_info__coupon__item" @click="goIntegral">
          <view class="user_info__coupon__item__icon"> 0 </view>
          <view class="user_info__coupon__item__text">
            <view class="user_info__coupon__item__text__title">積分</view>
          </view>
        </view>
      </view>

      <view style="height: 36.628rpx"> </view>

      <!-- 更多菜單 -->
      <view class="more_menu">
        <!-- <view class="more_menu__item">
          <view class="more_menu__item__text">禮品卡</view>

          <img class="more_menu__item__icon" :src="'./static/me/Vector.png'" />
        </view> -->

        <view class="more_menu__item">
          <view class="more_menu__item__text">領券中心</view>

          <img class="more_menu__item__icon" :src="'./static/me/Vector.png'" />
        </view>

        <view class="more_menu__item">
          <view class="more_menu__item__text" @click="goAddress">我的地址</view>

          <img class="more_menu__item__icon" :src="'./static/me/Vector.png'" />
        </view>

        <view class="more_menu__item">
          <view class="more_menu__item__text">客服中心</view>

          <img class="more_menu__item__icon" :src="'./static/me/Vector.png'" />
        </view>
      </view>
    </view>
    <f-tabbar></f-tabbar>

    <!-- 二維碼彈窗 -->
    <u-popup :show="show" mode="center" :round="10" @open="open">
      <view class="qrcode_popup">
        <img class="vip_qrcode" :src="'./static/demo/vip_qrcode.png'" alt="" />

        <img
          class="vip_qrcode_close"
          :src="'./static/demo/qr_code_close.png'"
          alt=""
          @click="close"
        />
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import base from "@/config/baseUrl";
import fNavbar from "@/components/module/f-navbar/f-navbar";
import fTabbar from "@/components/module/f-tabbar/f-tabbar";
export default {
  components: {
    fNavbar,
    fTabbar,
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  data() {
    return {
      baseUrl: base.baseUrl,
      systemInfo: base.systemInfo,
      show: false,
    };
  },
  onLoad() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
  },
  methods: {
    ...mapMutations(["setLoginPopupShow"]),
    close() {
      this.show = false;
    },
    open() {
      // console.log('open');
    },
    goUser() {
      uni.navigateTo({
        url: "/pages/my/PersonalInfo/index",
      });
    },
    // 去錢包消費記錄頁
    goWallet() {
      uni.navigateTo({
        url: "/pages/my/WalletConsumptionRecords/index",
      });
    },
    // 去我的积分頁
    goIntegral() {
      uni.navigateTo({
        url: "/pages/my/MyPoints/index",
      });
    },
    // 去我的地址
    goAddress() {
      console.log('asdofhaskldhj');
      
      uni.navigateTo({
        url: "/pages/my/myAddress/index",
      });
    },
  },
  onPageScroll(e) {},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: rgba(243, 243, 243, 1);
}

.my_info_bc {
  height: 371.512rpx;
  width: 750rpx;
}

.index_main {
  padding-left: 26.163rpx;
  padding-right: 26.163rpx;
}

.user_code {
  width: 52.326rpx;
  height: 52.326rpx;
  margin-top: 5rpx;
}

.user-info {
  display: flex;
  justify-content: space-between;
}

.user_info__avatar_container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.user_info__coupon {
  width: 20.7813vw;
  padding-top: 61.047rpx;
  padding-bottom: 61.047rpx;
  border-radius: 26.163rpx;
  background: rgba(255, 255, 255, 1);
  width: 697.674rpx;
  height: 357.558rpx;

  display: flex;
  justify-content: space-between;

  .user_info__coupon__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;

    position: relative;

    ._coupon_border {
      position: absolute;
      right: 0;
      top: 0rpx;
      background: rgba(149, 149, 149, 1);
      height: 195.349rpx;
      width: 1.744rpx;
    }
  }

  .user_info__coupon__item__icon {
    font-family: "Microsoft Tai Le";
    font-size: 62.791rpx;
    font-weight: 400;
    line-height: 45.77px;
    text-align: center;

    margin-top: 27.907rpx;
  }

  .user_info__coupon__item__text__title {
    font-family: "Microsoft Yi Baiti";
    font-size: 27.907rpx;
    font-weight: 400;
    line-height: 75rpx;
    text-align: center;

    position: relative;
    top: 52.326rpx;
  }
}

.more_menu {
  padding: 0 61.047rpx 0 61.047rpx;

  .more_menu__item {
    padding-left: 41.86rpx;
    height: 97.674rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 0.1px solid rgba(162, 162, 162, 1);
  }

  .more_menu__item__icon {
    width: 10.465rpx;
    height: 20.93rpx;
  }
}

.qrcode_popup {
  width: 692.442rpx;
  height: 767.442rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 50rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .vip_qrcode {
    width: 429.07rpx;
    height: 429.07rpx;
  }

  .vip_qrcode_close {
    width: 48.837rpx;
    height: 48.837rpx;

    margin-top: 69.767rpx;
  }
}
</style>
